// 创建数据集
import React, { useState, useEffect } from 'react';
import {
	Cascader,
	Col,
	Modal,
	Row,
} from 'antd';
import { SyncOutlined } from '@ant-design/icons';
import { getAllTable, getAnalysePageConfig, getDataSetByCode } from 'src/services/AnalyseManage';

interface Iprops {
	modalVisible: boolean;
	currentModalData: any;
	closeModal: () => void;
	handleReplace: ( arr ) => void;
}

interface listItemType {
	name: string;
	id: string;
	effect: string;
	isFile: boolean;
	des: string;
	isPublic: string;
	permittedAction: any;
}

// eslint-disable-next-line react/display-name
export const ReplaceDataSet = React.forwardRef( ( props: Iprops, formRef: any ) => {
	const [ options, setOptions ] = useState( [] );
	const [ checkMap, setCheckMap ] = useState( null );
	const [ tableList, setTableList ] = useState( [] );

	const handleCancle = () => {
		props.closeModal( );
	};


	const handleOk = () => {
		if ( !tableList.length ) {
			props.closeModal( );
			return;
		}
		const key = Object.keys( checkMap );
		const value = Object.values( checkMap );
		let arr = key.map( t => {
			return {
				fromDataSetCode: t
			};
		} ).map( ( s, index ) => {
			return {
				...s,
				toDataSetCode: value[index]
			};
		} );
		props.handleReplace( arr );
	};

	const onChange = ( index, value ) => {
		// console.log( index, value );
		const dataSet = value[1];
		const map = { [tableList[index].code]: dataSet };
		const newMap = { ...checkMap, ...map };
		setCheckMap( newMap );
	};

	const getDataOption = async() => {
		let pageResponse = await getAllTable( { roleSign: '' } );
		if ( pageResponse.data && pageResponse.data.success ) {
			let tables = pageResponse.data.data || [];
			tables = tables.filter( t => t.children && t.children.length );
			setOptions( tables );
		}
	};

	const getTableCodeList = async ( item: listItemType ) => {
		const res = await getAnalysePageConfig( { pageId: item.id, type: 'edit' } );
		if ( res.data && res.data.success ) {
			const { content } = res.data.data || {};
			if ( content ) {
				const config = JSON.parse( content );
				const codeList = config.children.map( t => t.data.tableCode ).filter( s => !!s );
				return codeList;
			}
		}
	};

	const getDataSetList = async ( item: listItemType ) => {
		const codeList = await getTableCodeList( item ) || [];
		if ( !codeList.length ) {
			// message.error( '报表图形未设置数据' );
			return;
		} 
		const res = await getDataSetByCode( { codeList } );
		if ( res.data && res.data.success ) {
			setTableList( res.data.data || [] );
		}
	};

	useEffect( () => {
		if ( props.modalVisible ) {
			getDataOption();
			getDataSetList( props.currentModalData );
		}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ props.modalVisible ] );

	return (
		<Modal okText={'确定'}
			visible={props.modalVisible}
			cancelText={'取消'}
			onCancel={handleCancle}
			onOk={handleOk}
			title={'数据替换'}>
			{!tableList.length && <div>报表图形未设置数据</div>}
			{!!tableList.length && <div>
				{tableList.map( ( t, index ) => {
					return (
						<Row key={t.id}>
							<Col span={6}>
								<span>{t.tableName}</span>
							</Col>
							<Col span={4} style={{ textAlign: 'center' }}>
								<SyncOutlined style={{ color: '#86bc25' }} />
							</Col>
							<Col span={14}>
								<Cascader size={'small'} style={{ width: '100%' }}
									fieldNames={{ label: 'toTableDesc', value: 'value', children: 'children' }} 
									options={options} onChange={( value ) => onChange( index, value )} placeholder="Please select" />
							</Col>
						</Row>
					);
				} )}
			</div> }
		</Modal>
	);
} );